<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <script th:src="@{/webjars/jquery/1.11.1/jquery.js}"></script>
    <link th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap-fileinput/4.3.5/js/fileinput.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-fileinput/4.3.5/css/fileinput.css}"/>

</head>

<body>
<nav class="navbar navbar-inverse">
    ...
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-1" onclick="refresh()">
            <button type="button" class="btn btn-success">测试</button>
        </div>
        <div class="col-md-11">
                <textarea id="sh" th:text="${name}">

                </textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8">
            <label>upload  </label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8">
            <!-- 此处加入文件上传testObject数据 -->
            <div class="form-group" style="border-top:1px solid #000">
                <!--                         <label class="col-xs-1 control-label">  upload:   </label> -->
                <div class="col-xs-1"></div>
                <div class="col-xs-10">
                    <input id="configUpload" name="file" type="file" data-show-caption="true">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="con"></div>
</div>
</body>
<script type="text/javascript">
    function refresh(){
        //需要发送的数据
        var modeljson={
            "id": "1"
        }

        $.ajax({
            url: "/ajax",
            type: 'post',
            //contentType: 'application/json', //没规定就是默认的application/x-www-form-urlencoded; charset=UTF-8
            data: modeljson,  //要发的数据，如果出现格式问题则 JSON.stringify(modeljson)
            async: true,
            success: function(data){
                if(data != null){
                    $("#sh").val(data);
                }
            }
        });
    }


    function beau(){
        //需要发送的数据
        var modeljson={
            "id": "1"
        }

        $.ajax({
            url: "/beau",
            type: 'post',
            data: modeljson,  //要发的数据，如果出现格式问题则 JSON.stringify(modeljson)
            async: true,
            success: function(data){
                d = JSON.stringify(data)
                var jdata = JSON.stringify(JSON.parse(d), null, 4);
                console.log(jdata);//这是在输出框的json数据确实被格式话了
                $("#b").html("<pre>"+jdata+"</pre>" );

            }
        });
    }



$(function(){
    //批量上传更新数据
    $("#configUpload").fileinput({
        showPreview: true,
        uploadUrl: "/upload",
        // allowedFileExtensions: ["xlsx"],
        layoutTemplates:{ progress: '<div class="progress">\n' +
            '    <div class="{class}" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:0%;">\n' +
            '        0%\n' +
            '     </div>\n' +
            '</div>'
        },
        elErrorContainer: "#errorBlock",
    }).on('filebatchpreupload', function(event, data) {
        //loading("${timeStamp}");
    });

    $("#configUpload").on("fileuploaded",function(event, data, previewId, index){
        console.log(data)
        d = JSON.stringify(data)
        var jdata = JSON.stringify(JSON.parse(d), null, 4);
        console.log(jdata);//这是在输出框的json数据确实被格式话了
        $("#b").html("<pre>"+jdata+"</pre>" );
    });

    $('#configUpload').on('fileuploaderror', function(event, data, msg) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        console.log('File upload error');
       // get message
       alert(msg);
    });

});
</script>
</html>